<html xmlns:th="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" href="common.css"/>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=mbVzSYfQWdO7gtpbfGU1FsAcsjHzuE6X"></script>
        <script type="text/javascript" src="js/convert.js"></script>
    </head>
    <body>

        <script th:inline="javascript">
            var datas = [[${logslatest}]];
            var all_data = [[${logs}]];
        </script>

        <div id="bmap" style="width:100%;height:100%;">

        </div>
        <script>
            var map = new BMapGL.Map("bmap");          // 创建地图实例
            var point = new BMapGL.Point(120.66,30.42);  // 创建点坐标
            map.centerAndZoom(point, 15);
            map.enablePinchToZoom();
            map.enableScrollWheelZoom();

            var pointArr = [];
            for(var i=0;i<datas.length;i++)
            {
              var p = datas[i];
              var point = new BMapGL.Point(Number(p.longitude )/ 1000 / 1000,Number( p.latitude) / 1000 / 1000);
              pointArr.push(point);

            }


            //坐标转换完之后的回调函数
            translateCallback = function (data){
              if(data.status === 0) {
                var convertedPoints = data.points;
                for(var i=0;i<convertedPoints.length;i++)
                {
                    var marker = new BMapGL.Marker(convertedPoints[i]);
                    map.addOverlay(marker);
                }
              }else {
                console.log(data)
                }
            }
            console.log(pointArr.length);

            var convertor = new BMapGL.Convertor();
            setTimeout(function(){
                    convertor.translate(pointArr,COORDINATES_WGS84,COORDINATES_BD09,translateCallback)
                }
                ,1000 * i / 10 + 1000);

            function check(e)
            {
                var point = new BMapGL.Point(Number(e.attributes.longitude.value )/ 1000 / 1000,Number( e.attributes.latitude.value) / 1000 / 1000);

                var tempa = []
                tempa.push(point)
                convertor.translate(tempa,COORDINATES_WGS84,COORDINATES_BD09,translateCallback)
            }
        </script>

        <script>

            var nlnglat = []
            var lntlat = all_data.map((e) => {return [Number(e.longitude )/ 1000 / 1000,Number( e.latitude) / 1000 / 1000]})
            setTimeout(function(){
            console.log(lntlat.length)
            for(var i =0 ;i < lntlat.length ; i++)
            {

                var [lng,lat] = WGS84toGCJ02(lntlat[i]);
                //console.log(lntlat[i],lng,lat)
                var [lng,lat] = GCJ02toBD09([lng,lat])
                var point = new BMapGL.Point(lng,lat);
                var marker = new BMapGL.Marker(point);
                map.addOverlay(marker);
                nlnglat.push([lng,lat])
            }
        },5000)
        </script>
        <div id="logtable" class="logtable">

            <h1>Dog location Logs</h1>
            <table>
                <tr>
                    <th>ID</th>
<!--                    <th class="deviceId">IMEI</th>-->
                    <th>精度</th>
                    <th>维度</th>
<!--                    <th>海拔</th>-->
<!--                    <th>坐标系统</th>-->
<!--                    <th>来源</th>-->
                    <th>上报时间</th>
                    <th>操作</th>
                </tr>
                <tr th:each="log : ${logs}" th:index="${log.id}">
                    <td th:text="${log.id}"></td>
<!--                    <td class="deviceId" th:text="${log.deviceId}"></td>-->
                    <td th:text="${log.longitude}"></td>
                    <td th:text="${log.latitude}"></td>
<!--                    <td th:text="${log.altitude}"></td>-->
<!--                    <td th:text="${log.coordinateSystem}"></td>-->
<!--                    <td th:text="${log.source}"></td>-->
                    <td th:text="${#temporals.format(log.createTime, 'dd/MM/yyyy HH:mm:ss')}"></td>
                    <td><button data-th-longitude="${log.longitude}" data-th-latitude="${log.latitude}" th:onclick="'check(this)'">查看点位</button> </td>
                </tr>
            </table>
        </div>
    </body>
</html>